<template>
  <div v-if="detailAuth">
    <!-- 头部 -->
    <page-header :title="$t('m.Promo_code_details')" />
    <div class="detail_div container">
      <div class="detail_left">
        <div class="detail_left_div">
          <div class="detail_title">
            {{ $t('m.Discount_code_information') }}
          </div>
          <div
            class="detail_text"
            style="display: flex;align-items: center;flex-wrap: wrap;"
          >
            <span>{{ $t('m.promo_code') }}: </span>
            <span class="detail_text2">{{ detailData.code | strFormat }} </span
            ><img
              src="@/assets/imgs/ic_copy.svg"
              alt=""
              @click="$util.copyText(detailData.code)"
              v-show="detailData.code"
              style="width:16px;height:16px;margin-left:8px;cursor: pointer;"
            />
          </div>
          <div class="detail_text">
            <span>{{ $t('m.invite_Type') }}: </span>
            <span class="detail_text2">{{
              detailData.applyType | stateFormat(optionsType) | strFormat
            }}</span>
          </div>
          <div class="detail_text">
            <span>{{ $t('m.Discount_type') }}: </span>
            <span class="detail_text2">{{
              detailData.deductionType | stateFormat(discountsType) | strFormat
            }}</span>
          </div>
          <div class="detail_text">
            <span>{{ $t('m.Offer_Information') }}: </span>
            <span class="detail_text2" v-show="detailData.deductionType == 1"
              >{{ detailData.deduction.type1FreeDurationVal | strFormat
              }}<span>{{
                detailData.deduction.type1FreeDurationUnit
                  | stateFormat(
                    detailData.deduction.type1FreeDurationVal > 1
                      ? optionsTime1
                      : optionsTime2
                  )
              }}</span></span
            >
            <span class="detail_text2" v-show="detailData.deductionType == 2">{{
              detailData.deduction.type2DiscountAmount | amountFormat
            }}</span>
            <span class="detail_text2" v-show="detailData.deductionType == 3"
              >{{ detailData.deduction.type3DiscountAmount }}%</span
            >
            <span v-show="!detailData.deductionType">--</span>
          </div>
          <div class="detail_text">
            <span>{{ $t('m.Term_of_use') }}: </span>
            <span
              class="detail_text2"
              v-show="
                detailData.deductionType == 1 &&
                  detailData.deduction.type1DiscountCondition == 1
              "
              >{{ $t('m.Minimum_rental_duration') }}
              {{ detailData.deduction.type1MinRentalTime | strFormat
              }}<span>{{
                detailData.deduction.type1MinRentalTimeUnit
                  | stateFormat(
                    detailData.deduction.type1MinRentalTime > 1
                      ? optionsTime1
                      : optionsTime2
                  )
              }}</span></span
            >
            <span
              class="detail_text2"
              v-show="
                detailData.deductionType == 2 &&
                  detailData.deduction.type2DiscountCondition == 1
              "
              >{{ $t('m.Minimum_rental_amount') }}
              {{
                detailData.deduction.type2MinRentalAmount | amountFormat
              }}</span
            >
            <span
              class="detail_text2"
              v-show="
                detailData.deductionType == 3 &&
                  detailData.deduction.type3DiscountCondition == 1
              "
              >{{ $t('m.Minimum_rental_amount') }}
              {{
                detailData.deduction.type3MinRentalAmount | amountFormat
              }}</span
            >
            <span
              v-show="
                (detailData.deductionType == 1 &&
                  detailData.deduction.type1DiscountCondition == 2) ||
                  (detailData.deductionType == 2 &&
                    detailData.deduction.type2DiscountCondition == 2) ||
                  (detailData.deductionType == 3 &&
                    detailData.deduction.type3DiscountCondition == 2)
              "
              >{{ $t('m.Unlimit') }}</span
            >
            <span v-show="!detailData.deductionType">--</span>
          </div>
          <div class="detail_text">
            <span>{{ $t('m.status') }}: </span>
            <span class="detail_text2">{{
              detailData.state | stateFormat(optionsState) | strFormat
            }}</span>
          </div>
          <div class="detail_text">
            <span>{{ $t('m.Validity_period') }}: </span>
            <span class="detail_text2" v-show="detailData.expiredType == 1"
              >{{ detailData.startTime | dateformat }} ~
              {{ detailData.endTime | dateformat }}</span
            ><span class="detail_text2" v-show="detailData.expiredType == 2">{{
              $t('m.Permanent2')
            }}</span
            ><span class="detail_text2" v-show="!detailData.expiredType"
              >--</span
            >
          </div>
          <div class="detail_text">
            <span>{{ $t('m.Validated_period_after_redemption') }}: </span>
            <span class="detail_text2"
              >{{ detailData.exchangeEffectiveDays | strFormat
              }}{{
                detailData.exchangeEffectiveDays
                  ? detailData.exchangeEffectiveDays > 1
                    ? ' ' + $t('m.days')
                    : ' ' + $t('m.day')
                  : ''
              }}</span
            >
          </div>
          <div class="detail_text">
            <span>{{ $t('m.Available_merchants') }}: </span>
            <span class="detail_text2">{{
              (detailData.applyType == 1
                ? detailData.merchantNameList
                : detailData.applyType === 0
                ? $t('m.All_merchants')
                : '') | strFormat
            }}</span>
          </div>
          <div class="detail_text">
            <span>{{ $t('m.Usage_limitation') }}: </span>
            <span class="detail_text2"
              >{{ detailData.usageLimit | strFormat
              }}{{ detailData.usageLimit ? $t('m.Charging_card_Second') : '' }}</span
            >
          </div>
          <div class="detail_text">
            <span>{{ $t('m.Inventory') }}: </span>
            <span class="detail_text2" v-show="detailData.stockType == 1">{{
              detailData.stockNum | numberFormat
            }}</span>
            <span class="detail_text2" v-show="detailData.stockType == 2">{{
              $t('m.Unlimit') | strFormat
            }}</span>
          </div>

          <div class="detail_text">
            <span>{{ $t('m.Instructions_for_use') }}: </span>
            <span class="detail_text2">{{
              detailData.description | langFormat | strFormat
            }}</span>
          </div>
        </div>
      </div>
      <div class="detail_right">
        <div class="detail_left_div" style="padding-bottom:20px">
          <div class="detail_title">
            {{ $t('m.Redemption_srecords') }}
          </div>
          <div class="el_table_div" style="padding: 0px;">
            <el-table :data="page.records">
              <emptydata
                slot="empty"
                v-if="!page.records || page.records.length == 0"
              />
              <el-table-column :label="$t('m.User_ID')">
                <template slot-scope="scope">
                  <div>{{ scope.row.ucode | strFormat }}</div>
                </template>
              </el-table-column>
              <el-table-column :label="$t('m.Redemption_time')">
                <template slot-scope="scope">
                  <div>{{ scope.row.createTime | dateformat }}</div>
                </template>
              </el-table-column>
              <el-table-column :label="$t('m.Expiry_time')">
                <template slot-scope="scope">
                  <div>{{ scope.row.endTime | dateformat }}</div>
                </template>
              </el-table-column>
              <el-table-column :label="$t('m.status')">
                <template slot-scope="scope">
                  <div>
                    {{ scope.row.state | stateFormat(validState) | strFormat }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column :label="$t('m.Orders_used_coupons')">
                <template slot-scope="scope">
                  <div>{{ scope.row.orderNo | strFormat }}</div>
                </template>
              </el-table-column>
              <el-table-column :label="$t('m.Usage_time')">
                <template slot-scope="scope">
                  <div>{{ scope.row.usedTime | dateformat }}</div>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页 -->
            <pagination
              :total="page.total"
              :current="page.current"
              :size="page.size"
              layout="total, prev, pager, next"
              @changePageSize="changePageSize"
              @changePageNum="changePageNum"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import pagination from '@/components/pagination.vue'
import page from '@/mixins/page'
export default {
  components: { pagination },
  mixins: [page],
  data () {
    return {
      detailData: {
        applyType: '', //适用类型: 0.所有商家 1.指定商家
        code: '', //优惠码
        deduction: {
          type: '', //	抵扣类型: 1-免费时长 2-优惠金额 3-金额折扣
          type1DiscountCondition: '', //	type1-优惠条件: 1-最少租用时间 2-不限制
          type1FreeDurationUnit: '', //	type1-免费时长单位: 1-分钟 2-小时
          type1FreeDurationVal: '', //	type1-免费时长值
          type1MinRentalTime: '', //	type1-最少租用时间
          type1MinRentalTimeUnit: '', //	type1-最少租用时间单位: 1-分钟 2-小时
          type2DiscountAmount: '', //	type2-优惠金额
          type2DiscountCondition: '', //	type2-优惠条件: 1-最低租金金额 2-不限制
          type2MinRentalAmount: '', //	type2-最低租金金额
          type3DiscountAmount: '', //	type3-租金折扣
          type3DiscountCondition: '', //	type3-优惠条件: 1-最低租金金额 2-不限制
          type3MinRentalAmount: '' //	type3-最低租金金额
        },
        deductionType: '', // 抵扣类型: 1-免费时长 2-优惠金额 3-金额折扣
        description: {
          de: '', //	德语
          en: '', //	英文
          fr: '', //	法语
          vi: '', //	
          it: '', //	意大利语
          ph: '', //	菲律宾语
          vi: '', //	越南语
          zh: '' //	中文
        },
        endTime: '', // 上架结束时间
        exchangeEffectiveDays: '', //	兑换生效天数
        exchangeLimit: '', //	兑换数量(优惠码数量)
        exchangePoint: '', //	兑换积分
        expiredType: '', //	到期时间类型: 1.有效期 2.永不过期
        id: '',
        image: '', //	优惠券样式图片地址
        merchantIdList: null, //	商家id集合，为null表示全平台
        minPaymentDeal: '', //	最低支付金额处理: 0-优惠 1-支付
        platformId: '', //	平台id
        startTime: '', //	起始时间
        state: '', //	状态: 1-上架 0-下架
        stockNum: '', //	库存数
        stockType: 1, //	库存类型: 1.设置数量 2.无限制
        title: '', //	优惠券名称
        undertaker: '', //	优惠金额承担: 0-品牌 1-商家
        updateTime: '',
        usageLimit: '', //	每人使用限制
        usageMethod: '' //	使用方式: 1.自动扣除 2.手动选择
      },
      optionsType: [
        { value: '0', label: this.$t('m.General_coupon') },
        { value: '1', label: this.$t('m.Merchant_coupon') }
      ],
      optionsTime1: [
        { value: '1', label: ' ' + this.$t('m.minute3') },
        { value: '2', label: ' ' + this.$t('m.hour4') }
      ],
      optionsTime2: [
        { value: '1', label: ' ' + this.$t('m.minute2') },
        { value: '2', label: ' ' + this.$t('m.hour3') }
      ],
      discountsType: [
        { value: 1, label: this.$t('m.system_FreeDuration') },
        { value: 2, label: this.$t('m.Order_Discount') },
        { value: 3, label: this.$t('m.Rent_discount') }
      ],
      optionsState: [
        { value: '1', label: this.$t('m.Online_coupon') },
        { value: '0', label: this.$t('m.Offline_coupon') }
      ],
      validState: [
        { value: '1', label: this.$t('m.Available2') },
        { value: '2', label: this.$t('m.Used') },
        { value: '3', label: this.$t('m.Expired') }
      ],
      detailAuth: this.permissionsId(197)
    }
  },
  created () {
    if (!this.detailAuth) {
      return
    }
    this.page = this.$options.data.call(this).page
    this.getDetail()
    this.getPage()
  },
  methods: {
    getDetail () {
      this.$api.couponCode.getDetail(this.$route.query.id).then(res => {
        if (this.$ok(res)) {
          this.detailData = res.data
        }
      })
    },
    getPage () {
      this.$api.couponCode
        .getCouponsRecord(this.$route.query.id, this.page)
        .then(res => {
          if (this.$ok(res)) {
            this.page = res.data
          }
        })
    }
  }
}
</script>

<style scoped lang="scss"></style>
